<template>
	<view class="menu">
		<view class="menu_title">
			<view class="title_left">我的订单</view>
			<view class="title_right" @click="toOrder('')">更多订单</view>
		</view>
		<view class="menu_item cartIcon_wrapper" @click="toOrder('1')">
			<image src="../../static/person/tuihuo.png" alt="" />
			<view class="pay-text">待支付</view>
			<view class="cartIcon1" v-if="statusPayNum&&statusPayNum!=0">{{statusPayNum}}</view>
		</view>
		<view class="menu_item cartIcon_wrapper" @click="toOrder('2')">
			<image src="../../static/person/daishouhuo.png" alt=""/>
			<view class="pay-text">待发货</view>
			<view class="cartIcon1" v-if="statusSendNum&&statusSendNum!=0">{{statusSendNum}}</view>
		</view>
		<view class="menu_item cartIcon_wrapper" @click="toOrder('3')">
			<image src="../../static/person/yiwancheng.png" alt=""/>
			<view class="pay-text">待收货</view>
			<view class="cartIcon1" v-if="statusReceiveNum&&statusReceiveNum!=0">{{statusReceiveNum}}</view>
		</view>
		<view class="menu_item cartIcon_wrapper" @click="toOrder('4')">
			<image src="../../static/person/tuihuo.png" alt=""/>
			<view class="pay-text">已完成</view>
		</view>
		<view class="menu_item cartIcon_wrapper" @click="toOrder('9')">
			<image src="../../static/person/shouhou.png" alt=""/>
			<view class="pay-text">退款/售后</view>
		</view>
	</view>
</template>

<script>
	export default{

		data() {
			return{
				statusPayNum: '',
				statusSendNum: '',
				statusReceiveNum: '',
			}
		},

		methods: {
			getOrderStatusNum() {
				this.getMyOrderList(1)
				this.getMyOrderList(2)
				this.getMyOrderList(3)
			},

			//获取订单列表
			async getMyOrderList(status){
				let res=await this.$api.getMyOrderList({
					page: 1,
					limit: 1,
					status: status,
				},this.$baseUrl);
				if (res.data.level == 'success'){
					if(status==1){
						this.statusPayNum = res.data.page_info.total;
					} else if(status==2){
						this.statusSendNum = res.data.page_info.total
					} else if(status==3){
						this.statusReceiveNum = res.data.page_info.total
					}

				}
			},

			//进入订单页面
			toOrder(index) {
				wx.navigateTo({
					url: '../order/order?index='+index
				})
			},
		}
	}
</script>

<style scoped lang="scss">

	/* 中间菜单栏 */
	.menu{
		background: #ffffff;
		/*background:#222222;*/
		width:calc(100vw - 20px);
		display: flex;
		flex-wrap: wrap;
		/*height: 100px;*/
		margin:10px;
		border-radius: 4px;
		/*color: #ffffff;*/
	}
	.menu_title{
		width: 100%;
		display: flex;
		height: 30px;
		padding-bottom: 10px;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
	.menu_title>.title_left{
		font-size: 16px;
		padding: 0 15px;
		font-weight: bold;
	}
	.menu_title>.title_right{
		margin-left: auto;
		padding: 5px 15px;
		font-size: 12px;
		color: #666666;
		/*color: #aaaaaa;*/
	}
	.menu_item{
		font-size: 12px;
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10px 0;
	}
	.menu_item>image{
		width:27px;
		height:25px;
	}
	.pay-text{
		margin-top: 8px;
	}

	.cartIcon_wrapper{
		position: relative;
	}
	.cartIcon{
		font-size: 10px;
		position: absolute;
		background:red;
		left:50px;
		width:15px;
		height: 15px;
		line-height: 15px;
		color:#fff;
		text-align: center;
		border-radius: 50%;
		top:5px;
	}
	.cartIcon1{
		font-size: 10px;
		position: absolute;
		background:red;
		left:50px;
		width:15px;
		height: 15px;
		line-height: 15px;
		color:#fff;
		text-align: center;
		border-radius: 50%;
		top:-5px;
	}

</style>
